<template>
  <div class="basic">
    <!-- ref -->
    <div class="main ref_main">
      <custom-ref />
    </div>
    <!-- computed -->
    <div class="main computed_main">
      <custom-computed :id="1" @widthChange="widthChange" />
      <div>{{ basicWidth + "----basicWidth" }}</div>
    </div>
    <!-- watch -->
    <div class="main watch_main">
      <custom-watch />
    </div>
    <!-- CustomModel 自定义v-model -->
    <div class="main model_main">
      <custom-model v-model="model1" />
      {{ model1 }}
    </div>
    <!-- CustomModel 自定义v-model -->
    <div class="main model_main">
      <custom-define-model v-model:title="model2" />
      {{ model2 }}
    </div>
    <!-- toRef用法 -->
    <div class="main watch_main">
      <custom-to-ref />
    </div>
    <!-- toRefs用法 -->
    <div class="main watch_main">
      <custom-to-refs />
    </div>
  </div>
</template>
<script setup>
import { ref, watchEffect } from "vue";
import CustomRef from "./ref.vue";
import CustomWatch from "./watch.vue";
import CustomComputed from "./computed.vue";
import CustomModel from "./customModel.vue";
import CustomDefineModel from "./customDefineModel.vue";
import CustomToRef from "./toRef.vue";
import CustomToRefs from "./toRefs.vue";
const basicWidth = ref(0);
function widthChange(width) {
  basicWidth.value = width;
}
const model1 = ref("");
const model2 = ref("");
watchEffect(() => {
  console.log("model1.value", model1.value);
  console.log("model2.value", model2.value);
});
</script>
<style lang="scss" scoped>
.basic {
  padding-bottom: 1px;
}
.main {
  margin: 20px;
  min-height: 100px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  @include flex(flex-start, flex-start, column, 10px);
}
</style>
